<template>
	<div class="discount">
		<slot name='youhui'>
			<div class="title1">
				<router-link to="my">
					<img src="../js/img/prev.png" alt="">
				</router-link>
				<span>我的优惠</span>
			</div>
			<div class="tab">
				<el-tabs v-model="activeName" @tab-click="handleClick" class="ni">
					<el-tab-pane label="红包" name="first" id="hongbao">
						<div class="bao">
							<p>有 <span>3</span>个红包即将过期</p>
							<span class="shuoming">
								<img src="../js/img/ques.png" alt="">
								红包说明
							</span>
							<img src="../js/img/1.png" alt="" class="first">
							<img src="../js/img/2.png" alt="" class="second">
							<img src="../js/img/4.png" alt="" class="threen">
							<p class="xian">限品类：快餐便当、特色菜系、小吃夜宵、甜品饮品、异国料理</p>
						</div>
						<div class="chakan">
							查看历史红包
							<img src="../js/img/jt.png" alt="">
						</div>
						<div class="bottom_jiang">
							<div class="dui">
								<p>兑换红红包</p>
							</div>
							<div class="tui">
								<p>推荐有奖</p>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="商家代金券" name="second" id="jin">
						<p class="daijinquan">
							<img src="../js/img/ques.png" alt="">
							<span>商品代金券说明</span>
						</p>
						<div class="count">
							<img src="../js/img/voucher.png" alt="">
							<p class="wufa">无法使用代金券</p>
							<p class="fei">非客户端或客户端版本太低</p>
							<button>下载或升级客户端</button>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</slot>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first'
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		}
	};
</script>

<style>
	.discount {
		width: 320px;
		height: 568px;
	}

	.title1 {
		width: 320px;
		height: 39px;
		background-color: #3190E8;
		font-size: 16px;
		line-height: 39px;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
	}

	.title1 span {
		display: inline-block;
		text-align: center;
		color: white;
	}

	.title1 img {
		width: 12px;
		height: 20px;
		float: left;
		margin-top: 10px;
		margin-left: 10px;
	}

	.tab {
		width: 320px;
		height: 40px;
		position: relative;
		top: 49px;
	}

	.ni {
		width: 320px;
		height: 40px;
	}

	.el-tabs__nav,
	.is-top {
		text-align: center;
		width: 320px;
		height: 40px;
	}

	.el-tabs__active-bar {
		width: 160px;
	}

	.el-tabs__item {
		width: 160px;
	}

	.bao {
		width: 320px;
		height: 400px;
		font-size: 12px;
	}

	.bao p {
		display: inline-block;
		margin-left: 10px;
	}

	.bao p span {
		color: #FF5340;
	}

	.first,
	.second,
	.threen {
		margin-left: 15px;
		margin-top: 10px;
		width: 292px;
		height: 100px;
	}

	.shuoming {
		float: right;
		margin-right: 10px;
		color: #3190E8;
	}

	.shuoming img {
		width: 12px;
		height: 12px;
	}

	.xian {
		width: 268px;
		font-size: 12px;
		color: #9F9F9F;
	}

	.chakan {
		margin-left: 120px;
		color: #999999;
		font-size: 12px;
	}

	.chakan img {
		width: 8px;
		height: 8px;
	}

	.bottom_jiang {
		width: 320px;
		height: 40px;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		line-height: 40px;
		text-align: center;
		background-color: white;
		/* background-color: #000000; */
	}

	.dui {
		width: 160px;
		height: 40px;
	}

	.tui {
		width: 160px;
		height: 40px;
	}

	.daijinquan {
		float: right;
		margin-right: 10px;
	}

	.daijinquan img {
		width: 12px;
		height: 12px;
		margin-right: 5px;
	}

	.count {
		width: 320px;
		height: 154px;
		padding-top: 50px;
		text-align: center;
	}

	.count img {
		width: 120px;
		height: 68px;
	}

	.wufa {
		color: #666666;
		margin-top: 5px;
	}

	.fei {
		color: #999999;
		margin-top: 5px;
	}

	.count button {
		width: 116px;
		height: 29px;
		border-radius: 5px;
		background-color: #56d176;
		outline: none;
		border: none;
		font-size: 13px;
		color: #FFFFFF;
		margin-top: 5px;
	}
</style>
